<template>
	<view>
		<custom-header :title="title" />
		<u-sticky :customNavHeight="height">
			<u-tabs class="tabs" :list="tabsList" @click="onTabClick" :scrollable="false"
				style="padding: 0 24rpx; background: #fff; z-index: 22; position: sticky; top: 0px"
				:activeStyle="{ color: '#171717', fontSize: '16px', fontWeight: 500 }"
				:inactiveStyle="{ color: '#C6C6C6', fontSize: '16px', fontWeight: 500 }" lineColor="#1E6FFF"></u-tabs>
		</u-sticky>
		<!-- #ifdef APP-PLUS -->
		<view style="height: 40px;"></view>
		<!-- #endif -->
		<view class="task_lists" :style="{ marginTop: '50px'}">
			<collapse name="基础信息" id="outside1" :maxHeight="maxHeight1" :borderRadius="0" :hasIcon="true">
				<view class="listdefault" :id="uId1">
					<view class="action" v-for="(item, key) in basicInfo" :key="key"
						:style="{width: item.labelWidth + '%'}">
						<view class="list1">{{ item.label }}</view>
						<view class="list2">{{ detailData[item.key] }}</view>
					</view>
				</view>
			</collapse>
			<default-list name="附件信息" :borderRadius="0" :hasIcon="true" id="outside2">
				<file-list :fileList="detailData.attachment"></file-list>
			</default-list>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import fileList from './components/fileList.vue'
	import collapse from '@/pages/purchase/components/collapse.vue'
	import defaultList from '@/pages/purchase/components/defaultList.vue'
	import {
		queryById, // 根据id查询信息
	} from '@/api/purchase/ErpMaterial.js'
	export default {
		data() {
			return {
				tabsList: [{
					name: '基础信息',
					id: 'outside1'
				}, {
					name: '附件信息',
					id: 'outside2'
				},],
				detailData: {}, // 详情数据
				basicInfo: [
					{
						label: '物料名称',
						key: 'materialName',
						labelWidth: 100
					},
					{
						label: '物料编码',
						key: 'materialBill'
					},
					{
						label: '物料大类',
						key: 'provisionBroad_dictText',
					},
					{
						label: '物料小类',
						key: 'provisionSmall_dictText',
					},
					
					{
						label: '规格型号',
						key: 'specification',
					},
					{
						label: '品牌',
						key: 'brand',
					},
					{
						label: '制造商',
						key: 'manufacturer',
					},
					{
						label: '产地',
						key: 'production',
					},
					{
						label: '参考价格（元）',
						key: 'referencePrice'
					},
					{
						label: '单位',
						key: 'unit_dictText',
					},
					{
						label: '其他属性1',
						key: 'ohterOne',
						labelWidth: 100
					},
					{
						label: '其他属性2',
						key: 'ohterTwo',
						labelWidth: 100
					},
					{
						label: '备注',
						key: 'remark',
						labelWidth: 100
					}
				],
				scrollTop: 0, // 滚动顶部距离
				maxHeight1: 0,
				// maxHeight2: 0,
				uId1: uni.$u.guid(),
				// uId2: uni.$u.guid(),
				title: '物料管理',
				height: 37,
			}
		},
		components: {
			fileList,
			collapse,
			defaultList,
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		created() {
			uni.getSystemInfo({
				success(e) {
					uni.setStorageSync('getSystemInfo', e);
				}
			})
			let safeArea = uni.getStorageSync('getSystemInfo').safeArea.top
			this.height = safeArea + 37
		},
		onReady() {
			// uni.setNavigationBarTitle({
			// 	title: this.model.bpmBizTitle.replace(/(【|】)/g, ''),
			// })
		},
		onLoad(options) {
			options && options.id && this.loadData(options.id)
		},
		methods: {
			// 查询预立项申请详情
			loadData(id) {
				queryById({
					id
				}).then((res) => {
					if (res.success) {
						this.detailData = res.result
						this.$nextTick(function() {
							this.setCollapseHeight()
						})
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				})
			},
			setCollapseHeight() {
				this.timer = setTimeout(() => {
					clearTimeout(this.timer)
					this.timer = null
					this.$nextTick(function() {
						uni
							.createSelectorQuery()
							.select('#' + this.uId1)
							.boundingClientRect((data) => {
								this.maxHeight1 = data.height
							})
							.exec()
					})
				}, 300)
			},
			// 点击tabs
			onTabClick(item) {
				uni
					.createSelectorQuery()
					.in(this)
					.select(`#${item.id}`)
					.boundingClientRect((data) => {
						uni.pageScrollTo({
							scrollTop: data.top + this.scrollTop - 54,
							duration: 150,
						})
					})
					.exec()
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import './common/actionNew.scss';

	// .task_lists {
	// 	padding: 20rpx 20rpx 0;

	// }

	.image_lists {
		padding: 0 0 12rpx 12rpx;
		display: flex;
		flex-wrap: wrap;

		.image_list {
			margin-bottom: 20rpx;
			width: 144rpx;
			margin-right: 14rpx;

			.image_img {
				width: 116rpx;
				height: 116rpx;
				padding: 12rpx;
				background: rgba(0, 0, 0, 0.02);
				border-radius: 1px;
				border: 1px solid rgba(0, 0, 0, 0.08);
				position: relative;

				.image_action {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(-50%) translateY(-50%);
					width: 36rpx;
					height: 36rpx;
				}

				.image_source {
					width: 100%;
					height: 100%;
				}
			}

			.image_name {
				font-size: 10px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #b2b2b2;
				line-height: 28rpx;
				margin-top: 8rpx;
				text-align: left;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 152rpx;
			}
		}
	}

	.flow_right {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		text {
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1e6fff;
			line-height: 40rpx;
			margin-left: 4rpx;
		}
	}

	.task_bottom {
		display: flex;
		align-items: center;
		padding: 20rpx 0 20rpx 52rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10000;

		.task_bottom_write {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7f7f7f;
				line-height: 40rpx;
			}
		}

		.refuse {
			width: 168rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;
			margin: 0 16rpx 0 52rpx;
			font-size: 17px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			text-align: center;
		}

		.agree {
			width: 318rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #1e6fff;
			border-radius: 10rpx;
			font-size: 17px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
		}
	}

	.file-type {
		margin-top: 20rpx;
		font-size: 14px;
		// font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B2B2B2;
	}

	.file-type-line {
		margin: 20rpx 0 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.1);
		height: 2rpx;
	}
</style>